<template>
    <!-- components/filter/filterRate/index.wxml -->
    <view class="flex_column" style="height: 100%; position: relative">
        <!-- 筛选栏 -->
        <view class="cxj-contents">
            <view class="cxj-menu">
                <view :class="'flex-view' + (item.active ? ' active' : '')" :data-index="index" @tap="filterTab" v-for="(item, index) in tabTxt" :key="index">
                    <text :class="'flex_nav ' + (item.active ? ' active' : '')">{{ item.text }}</text>

                    <i :class="'iconfont ' + (item.active ? ' iconshanglaxiala-' : 'iconshanglaxiala-1')" />

                     
                </view>
            </view>
        </view>

        <!-- 内容插槽 -->
        <scroll-view :scroll-y="!isOpen" class="cxj-slot">
            <slot></slot>
        </scroll-view>

        <!-- 条件选项栏 -->
        <view class="cxj-tab-layout" v-if="item.active" v-for="(item, index1) in tabTxt" :key="index1">
            <scroll-view scroll-y class="scroll">
                <view class="cxj-tap-wrap">
                    <view v-for="(item_child, index2) in item.child" :key="index2">
                        <view class="title">{{ item_child.title }}:</view>

                        <view class="cxj-tap-main">
                            <view
                                :class="'navs ' + (item_childtype.selected == true ? 'active' : '')"
                                :data-id="item_childtype.id"
                                data-index="0"
                                :data-txt="item_childtype.text"
                                v-for="(item_childtype, index3) in item_child.childType"
                                :key="index3"
                            >
                                <view @tap="clickTabChild" :data-index1="index1" :data-index2="index2" :data-index3="index3">{{ item_childtype.text }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="select_btn">
                    <button class="clear" @tap="filterClears">清空条件</button>
                    <button class="submit" @tap="filterSubmit">确定</button>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
// components/filter/index.js

const titles = [
    {
        text: '价格',
        active: false,
        child: [
            {
                title: '价格',
                childType: [
                    {
                        text: '2万',
                        selected: false
                    },
                    {
                        text: '5万',
                        selected: false
                    },
                    {
                        text: '10万',
                        selected: false
                    },
                    {
                        text: '20万',
                        selected: false
                    }
                ]
            }
        ]
    },
    {
        text: '地区',
        active: false,
        child: [
            {
                title: '地区',
                childType: [
                    {
                        text: '北京',
                        selected: false
                    },
                    {
                        text: '上海',
                        selected: false
                    },
                    {
                        text: '深圳',
                        selected: false
                    },
                    {
                        text: '广州',
                        selected: false
                    }
                ]
            }
        ]
    },
    {
        text: '距离',
        active: false,
        child: [
            {
                title: '类型',
                childType: [
                    {
                        text: '2km',
                        selected: false
                    },
                    {
                        text: '5km',
                        selected: false
                    },
                    {
                        text: '10km',
                        selected: false
                    },
                    {
                        text: '100km',
                        selected: false
                    }
                ]
            }
        ]
    },
    {
        text: '筛选',
        active: false,
        child: [
            {
                title: '类型',
                childType: [
                    {
                        text: '类型1',
                        selected: false
                    },
                    {
                        text: '类型2',
                        selected: false
                    },
                    {
                        text: '类型3',
                        selected: false
                    },
                    {
                        text: '类型4',
                        selected: false
                    }
                ]
            },
            {
                title: '特色',
                childType: [
                    {
                        text: '特色1',
                        selected: false
                    },
                    {
                        text: '特色2',
                        selected: false
                    },
                    {
                        text: '特色3',
                        selected: false
                    },
                    {
                        text: '特色4',
                        selected: false
                    },
                    {
                        text: '特色5',
                        selected: false
                    },
                    {
                        text: '特色6',
                        selected: false
                    },
                    {
                        text: '特色7',
                        selected: false
                    },
                    {
                        text: '特色8',
                        selected: false
                    },
                    {
                        text: '特色9',
                        selected: false
                    },
                    {
                        text: '特色10',
                        selected: false
                    },
                    {
                        text: '特色11',
                        selected: false
                    },
                    {
                        text: '特色12',
                        selected: false
                    },
                    {
                        text: '特色13',
                        selected: false
                    },
                    {
                        text: '特色14',
                        selected: false
                    },
                    {
                        text: '特色15',
                        selected: false
                    },
                    {
                        text: '特色1',
                        selected: false
                    },
                    {
                        text: '特色2',
                        selected: false
                    },
                    {
                        text: '特色3',
                        selected: false
                    }
                ]
            }
        ]
    }
];
export default {
    data() {
        return {
            tabTxt: [],
            isOpen: false
        };
    },
    props: {},
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            let that = this;
            that.setData({
                tabTxt: titles
            });
        },

        isOpenFun() {
            console.log(111);
            return true;
        },

        //切换导航按钮
        filterTab(e) {
            var that = this;
            var data = JSON.parse(JSON.stringify(that.tabTxt));
            var index = e.currentTarget.dataset.index;
            var newTabTxt = data.map(function (e) {
                e.active = false;
                return e;
            });
            newTabTxt[index].active = !that.tabTxt[index].active;
            this.setData({
                isOpen: newTabTxt[index].active,
                tabTxt: data
            });
        },

        // 点击导航按钮的条件
        clickTabChild(e) {
            // console.log(e.currentTarget.dataset)
            let tabTxt = this.tabTxt;
            let index1 = e.currentTarget.dataset.index1;
            let index2 = e.currentTarget.dataset.index2;
            let index3 = e.currentTarget.dataset.index3;
            // console.log(index2)
            // console.log(tabTxt[index1].child[index2].childType[index3].selected);
            //1.在改变某个子按钮之前先把该子按钮组的所有选中状态selected改成false，
            tabTxt[index1].child[index2].childType.forEach((e) => {
                e.selected = false;
            });
            //2.之后再把当前点击的按钮的状态改为true
            tabTxt[index1].child[index2].childType[index3].selected = !tabTxt[index1].child[index2].childType[index3].selected;
            this.setData({
                tabTxt: tabTxt
            });
            //  console.log(tabTxt)
        },

        // 清空条件
        filterClears(e) {
            var that = this;
            let tabTxt = that.tabTxt;
            tabTxt.forEach((e1) => {
                // console.log(e1)
                e1.child.forEach((e2) => {
                    // console.log(e2)
                    e2.childType.forEach((e3) => {
                        // console.log(e3)
                        if (e1.active) {
                            e3.selected = false;
                        }
                    });
                });
            });
            this.setData({
                tabTxt: tabTxt
            });
        },

        // 确定按钮
        filterSubmit(e) {
            let tabTxt = this.tabTxt;
            let selectedTextArr = [];
            tabTxt.forEach((e1) => {
                // console.log(e1)
                e1.active = false; //关闭抽屉
                e1.child.forEach((e2) => {
                    // console.log(e2)
                    e2.childType.forEach((e3) => {
                        // console.log(e3)
                        if (e3.selected) {
                            //选中的加载在一个数组中
                            selectedTextArr.push(e3.text);
                        }
                    });
                });
            });
            this.setData({
                isOpen: false,
                tabTxt: tabTxt
            });
            console.log(selectedTextArr);
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
